<template>
  <div class="newDivBox" style='position: relative;'>
    <el-tabs v-model="activeName" :before-leave="moreState">
      <el-tab-pane class="lable1" label="采购行情" name="buy" :key="'buy'">
        <buy-quote-vue @changeTab="gotoSell" />
      </el-tab-pane>
      <el-tab-pane class="lable2" label="供应行情" name="sell" :key="'sell'">
        <sell-quote-vue @changeTab="gotoBuy" />
      </el-tab-pane>
    </el-tabs>
    <button class="normal-white-blue-text-btn" style='position: absolute;right:20px;top:30px;'
      @click="clickBuy">我想买</button>
    <buy-assets-vue :dialogFormVisible="buyAssetsDlg" @changeBuyAssetsDialogFormVisible="changeDialogFormVisible" />
  </div>
</template>
<script>
import buyQuoteVue from "./buy/buyQuote.vue"
import sellQuoteVue from "./sell/sellQuote.vue"
import buyAssetsVue from "./buyAssets.vue"
import orderResultVue from "./orderResult.vue"
export default {
  components: {
    buyQuoteVue,
    sellQuoteVue,
    buyAssetsVue,
    orderResultVue
  },
  data() {
    return {
      //默认第一个选项卡
      activeName: "buy",
      curTab: '',
      buyAssetsDlg: false,
      tenantInfo: {
        institutionName: '',
        name: '',
        phone: ''
      },
    }
  },
  methods: {
    moreState(tab, event) {
      if (tab == 'more') {
        this.curTab = ''
        return false;
      } else {
        this.curTab = tab
        this.activeName = tab
      }
    },
    clickBuy() {
      this.buyAssetsDlg = true
    },
    changeDialogFormVisible(res) {
      if (res) {
        this.buyAssetsDlg = true
      } else {
        this.buyAssetsDlg = false
      }

      // if (res) {
      //   this.$router.push('/trade/offer')
      // }
      // this.$emit('changeTab', "sell");
    },
    gotoSell() {
      this.activeName = "sell"
    },
    gotoBuy() {
      this.activeName = "buy"
    }
  }
}
</script>
<style  lang="scss" scoped>
.lable1 {
  margin-bottom: 10px;
  color: rgb(0, 0, 0);
}

.more-btn {
  display: a;
  text-align: right;
}

/deep/ #tab-more {
  width: calc(100% - 10px);
  text-align: right;
}

/deep/ .el-tabs__nav {
  width: calc(100% - 200px);
}

.el-tabs {
  flex: 1;

  /deep/ .el-tabs__item.is-active {
    color: #26a872;
  }

  /deep/ .el-tabs__item:hover {
    color: #26a872;
  }

  /deep/ .el-tabs__active-bar.is-top {
    background: #26a872;
  }

  /deep/ .el-tabs__item {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #5E6C84;
  }
}
</style>